<template lang="pug">
ModuleWrapper(title="富民县水果产业概况" flex="1")
  .title
    | 种植面积：
    span.em 15.2906万人
    | &nbsp;
    | 产量：
    span.em 9.1416万人
  .chart-container
    .chart-wrap(ref="chart")
    .chart-legend
      StaticSimpleView.simple-static(v-for="(item, index) in staticData"
        :label="item.name" :value="item.value"
        :color="colorData[index]")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      colorData: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', '#aa55ff','#aaffff',],
      staticData: [
        {value: 919, name: '东村镇'},
        {value: 295, name: '永定街道'},
        {value: 258, name: '罗免镇'},
        {value: 258, name: '散旦镇'},
        {value: 258, name: '赤鹫镇'},
        {value: 258, name: '款庄镇'},

      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        color: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ],
        series: [
          {
            name: '人口',
            type: 'pie',
            radius: [20, 80],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 2
            },
            label: {
              show: false,
            },
            data: [
              {value: 919, name: '东村镇'},
              {value: 295, name: '永定街道'},
              {value: 258, name: '罗免镇'},
              {value: 258, name: '散旦镇'},
              {value: 258, name: '赤鹫镇'},
              {value: 258, name: '款庄镇'},
            ]
          }
        ]
      });

    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .title{
    padding-left: rem(10);
    @include fontSie(20);
    color: #EFEFEF;
    padding-top: rem(10);
    .em{
      font-size: 1.1em;
      font-weight: bold;
    }
  }
  .chart-container{
    display: flex;
    flex: 1;
    .chart-wrap{
      flex: 1;
    }
    .chart-legend{
      padding-left: rem(20);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: rem(10);
    }
  }
}
</style>
